<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8"/>
        <title>京西（JX.COM）-你值得信赖 </title>	
        <style>
        #a ul{list-style-type: none;}
        #a li{float: left;font-family: "黑体";color:gray;font-size: small;line-height: 33px;}
        #b ul{list-style-type: none;}
        #b li{float: right;font-family: "黑体";color:gray;font-size: small;line-height: 33px;}
        a {text-decoration: none;color: inherit;}
        b {text-decoration: none;color: inherit;}
        
        body{
                  background: #f2f2f2;
                  font-family: 'Open Sans', sans-serif;
             }

                .search {
                width: 100%;
                position: relative;
                display: flex;
             }

                .searchTerm {
                width: 100%;
                border: 3px solid #00B4CC;
                border-right: none;
                padding: 5px;
                height: 20px;
                border-radius: 5px 0 0 5px;
                outline: none;
                color: #9DBFAF;
             }

                .searchTerm:focus{
                color: #00B4CC;
             }

                .searchButton {
                width: 50px;
                height: 36px;
                border: 1px solid #00B4CC;
                background: #00B4CC;
                text-align:center;
                color: #fff;
                border-radius: 0 5px 5px 0;
                cursor: pointer;
                font-size: 20px;
             }


                .wrap{
                width: 30%;
                position: absolute;
                top: 25%;
                left: 50%;
                transform: translate(-50%, -50%);
             }
#max{
  width: 1000px;
  height: 500px;
  align-items: center;
  margin: 5% auto;
  margin-top: 0%;
}
.re{
  position: relative;
  height: 400px;
}
.re ul{
  list-style-type:none ;
}
.re ul>li{
  width: 600px;
  height: 300px;
  position: absolute;

  transition: 1s;
  opacity: 0;
}
.re ul>li img{
  width: 906px;
  height: 500px;
  border-radius: 10%;
  border: 15px solid #fffbd6;
}
#max ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5,75px);
  grid-template-rows: auto;
  grid-gap: 1em;gap: 1em;
  float: right;
  margin-top: 450px;
  list-style: none;
  top:0;left:0;
}
#max ol li {
  width: 25px;
  height: 10px;
  font-size: 15px;
  line-height: 20px;
  float: left;
  text-align: center;
  border-radius: 2em;
  border: 5px solid #999999;
}


        </style>
        <script>
window.onload = function(){
  var box=this.document.getElementsByClassName("re")[0];
  var lik=box.getElementsByTagName("li");
  function fun(i,j){//转换图片函数，就是把透明度改了一下
    lik[i].style.opacity=1;
    lik[j].style.opacity=0;
    lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
    lik[j+5].style.backgroundColor="#00000000"
  }
  fun(0,1);//初始化下
  var i =0;
  function auto(){//轮播循环函数
    if(++i>=5){
      i=0;
      fun(0,4);
    }
    else fun(i,i-1);
  }
  timer=this.setInterval(auto,2000);
  box.onmouseover = function () { //鼠标划上去，停止轮播
    console.log('good');
    clearInterval(timer);
  }
  box.onmouseout = function () { //鼠标划出，继续轮播
    timer = setInterval(auto, 2000); //调用定时器
  }
  var j =0;
  for(;j<5;j++){//点击小图标也可以转换图片
    lik[j+5].ind=j;
    lik[j+5].onclick=function(){
      fun(this.ind,i)
      i=this.ind;
    }
  }

}

        </script>
 	</head>
 	<body>	
 		 <div id="header" style="background-color:lightgray;height:30px;width:100%px;">
 		  <div id="a">
 		   <ul>
             
             <li><a href="123456.html">我的订单</a>|</li>
             <li><a href="123456.html">我的京西</a>|</li>
             <li><a href="123456.html">京西会员</a>|</li>
             <li><a href="123456.html">企业采购</a>|</li>
             <li><a href="123456.html">客户服务</a>|</li>
             <li><a href="123456.html">下载app</a>|</li>        
           </ul>
          </div>
          <div id="b">
         	 <ul>
         		<li><a href="123456.html">购物车</a>|</li>
                <li><a href="2.html">你好，请登录</a>|</li>
         	 </ul>	
          </div>
        <div style="width: 960px;height: 80px;position: relative;margin-left:250px;margin-right:auto;padding: 49px; "> 
		  <img src="img/logo.jpg" width="175" height="175">	
		</div> 
		<div class="wrap">
           <div class="search">
              <input type="text" class="searchTerm" placeholder="你想找什么?">
              <button type="submit" class="searchButton"  >
                 <i class="fa fa-search"></i>
                                         搜
              </button>
           </div>
        </div>
        <div style="width:450px;;float:right;margin-top:-80px "> 
      	  <img src="img/360截图20211020091736197.jpg" width="100" height="100">
        </div>	
     <div style="background-size:100%; position: relative; margin:30px; padding: 60px;  background-color: white;">
     	<div id="topnav" style="float:left;width: 97%; height: 20px; word-spacing: 5px; font-size: 90%; padding-left:40px; padding-top: 6px; white-space: nowrap; text-align:center; background-color: black;color: white;margin-top:-50px;">
            <nav>
                 <a href="123456.html">秒杀</a>
                 <a href="123456.html">优惠券</a>
                 <a href="123456.html">会员</a>
                 <a href="123456.html">品牌</a>
                 <a href="123456.html">拍卖</a>
                 <a href="123456.html">好康的</a>
                 <a href="123456.html">跳蚤市场</a>
                 <a href="123456.html">京西云</a>                 	                                  	                 
            </nav>   
        </div>
        
   <div style="text-align: center;font-family: '微软雅黑';font-size: large;">
   	    热门产品
   </div>       
          
<div id="max">
        <div class="re">
            <ul>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/QQ图片20211022093339.jpg" alt=""></li>
                <li><img src="./img/QQ图片20211022093350.jpg" alt=""></li>
                <li><img src="./img/i-img1024x767-1634456081cryy2116973.jpg" alt=""></li>
                <li><img src="./img/i-img1200x900-1634433285qgx3u32295.jpg" alt=""></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

        <div style="text-align: center;font-family: '微软雅黑';font-size: xx-large;color: orange;margin-top: 150px;">
        	商品分类
        	
        </div>      
     </div>
        <div style="float: left;position:relative;left:70px;margin-top:-0px;">
        	<a href="123456.html">
        	<img src="img/8541.jpg" width="275" height="275" style="margin-right: 50px;margin-left:50px ;;">
        	</a>
        	<img src="img/t01cec3fc9633c1e095.jpg" width="275" height="275"style="margin-right: 50px;">   
        	
        </div>
        <div style="float: left;position:absolute;">
        	<a href="Html/text3.html">
        	<img src="img/10651154_980x1200_0.jpg"width="275" height="275" style="margin-left:120px;margin-top: 10px;">
        	</a>
        	<a href="Html/text2.html">
        	<img src="img/t01e18c17d53e1c2d7c.jpg"width="275" height="275" style="margin-left:50px;margin-top: 10px;">
        	</a>
        	<a href="text2.html">
        	<img src="img/391c8d15f986c2e4.jpg" width="600" height="600" style="margin-left: 30px;"/>
    	    </a>
        	  <hr style="width:1500px;">
        	 <div style="text-align: center;font-family: '微软雅黑';font-size: small;"> 
        	  <h2>2021 POWERED BY XXX</h2>
        	 </div> 
        </div>      
 	</body> 	
 </html>